<template>
  <div class="wash">
    <van-nav-bar
      left-text="洗车"
      fixed
      safe-area-inset-top
      @click-left="onClickLeft"
    >
      <template #right>
        <div v-if="!hasCar" class="selectCar" @click="addCar">
          <div class="left">
            <img src="@/assets/icon/common/car.png" alt="" />
          </div>
          <div class="right">添加爱车</div>
        </div>
        <div v-else class="hasCar">
          {{ carInfo.brand }}
          <!-- <van-icon name="edit" color="#fff" class="edit" /> -->
        </div>
      </template>
    </van-nav-bar>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <baoyangItem
            v-for="(v, i) in list"
            :key="i"
            :item="v"
            @click.native="goDetail(v)"
          ></baoyangItem>
        </van-list>
        <van-empty v-if="list.length == 0 && !loading" description="暂无商品" />
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import washCarListItem from "@/components/wash/listItem.vue";
import baoyangItem from "@/components/serve/baoyangItem.vue";
import { mapGetters } from "vuex";
import api from "@/api/api";
export default {
  components: {
    washCarListItem,
    baoyangItem,
  },
  props: {},
  data() {
    return {
      hasCar: true,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      carInfo: {},
      id: "",
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["carList", "currentCarIndex"]),
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    addCar() {
      this.$router.push({
        path: "/addCar",
      });
    },
    goStore() {
      this.$router.push({
        path: "/storeDetail",
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.refreshing = true;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageInfo.pageNum = 1;
      this.list = [];
      this.onLoad();
    },
    async onLoad() {
      await this.getList();
      this.refreshing = false;
    },
    markeSureOrder(item) {
      this.$router.push({
        path: "/makeSure",
      });
    },
    async getList() {
      let res = await api.getHomeGoods({
        categoryId: this.id,
        homePage: false,
        ...this.pageInfo,
      });
      this.list = [...this.list, ...res.data];
      this.loading = false;
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
    },
    goDetail(v) {
      this.$router.push({
        path: "/serveDetail",
        query: {
          goodsId: v.id,
          type: 1,
        },
      });
    },
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    if (this.carList.length) {
      this.hasCar = true;
      this.carInfo = this.carList[this.currentCarIndex];
    }
  },
};
</script>
<style lang="less" scoped>
.wash {
  min-height: 100vh;
  // background: url("@/assets/bg/bg.jpg") no-repeat;
  // background-size: cover;
  // background-attachment: local;
  // background-position: top center;
  box-sizing: border-box;
  padding: 150px 0 0 0;
  position: relative;
  // background: #fff;

  .selectCar {
    min-width: 200px;
    padding: 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #fff;
    border-radius: 999px;
    .left {
      width: 80px;
      height: 80px;
      border-radius: 40px;
      background-color: #0162eb;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 50px;
        max-width: 100%;
        object-fit: contain;
      }
    }
    .right {
      margin-left: 10px;
      font-size: 40px;
      color: #000;
      letter-spacing: 3px;
      font-weight: bold;
    }
  }

  .hasCar {
    display: flex;
    align-items: center;
    font-size: 44px;
    color: #fff;
    .edit {
      font-size: 44px;
      margin-left: 15px;
    }
  }

  .list {
    // background: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 80px 50px;
  }

  /deep/ .van-nav-bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
      no-repeat;
    background-size: cover;
    overflow: hidden;
    .van-nav-bar__left {
      .van-icon {
        color: #fff;
        font-weight: bold;
      }
      .van-nav-bar__text {
        color: #fff;
        font-weight: bold;
      }
    }
  }

  /deep/ .van-hairline--bottom::after {
    border: unset;
  }
}
</style>
